<template>
  <form-item>
    <el-tabs v-model="activeName">
      <el-tab-pane name="second" label="属性">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="基本属性" name="1">
            <template v-if="viewType === 'drag'">
              <freeItem :commonOptions="commonOptions"></freeItem>
            </template>
            <el-form-item label="表头单元格class">
              <el-input
                v-model="options.headerCellClassName"
                placeholder="请输入表头单元格class"
              ></el-input>
            </el-form-item>
            <el-form-item label="表体行class">
              <el-input
                v-model="options.tableRowClassName"
                placeholder="请输入行class"
              ></el-input>
            </el-form-item>
            <el-form-item label="行数据key">
              <el-input
                v-model="options.rowKey"
                placeholder="请输入行数据key"
              ></el-input>
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="分页属性" name="2">
            <el-form-item label="启用分页">
              <el-switch v-model="options.showPagination"> </el-switch>
            </el-form-item>
            <template v-if="options.showPagination">
              <el-form-item label="总页数">
                <el-input-number
                  :min="1"
                  :step="1"
                  :precision="0"
                  v-model="options.total"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="第几页">
                <el-input-number
                  :min="1"
                  :step="1"
                  :precision="0"
                  v-model="options.queryObj.pageNum"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="每页多少条">
                <el-input-number
                  :min="1"
                  :step="1"
                  :precision="0"
                  v-model="options.queryObj.pageSize"
                ></el-input-number>
              </el-form-item>
            </template>
          </el-collapse-item>
          <el-collapse-item title="其他属性" name="3">
            <el-form-item label="启用全选">
              <el-switch v-model="options.showSelectAll"> </el-switch>
            </el-form-item>
            <el-form-item label="启用序号">
              <el-switch v-model="options.showIndex"> </el-switch>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="表头列" name="fourth">
        <el-form-item label-width="0">
          <options-component
            :popoverIndex.sync="popoverIndex"
            @add="addList"
            frontmatter
            @remove="removeList"
            :options.sync="options.tableColumn"
          >
            <template v-slot:content="{ scope }">
              <el-form-item label="表头名">
                <el-input placeholder="表头名" v-model="scope.label"></el-input>
              </el-form-item>
              <el-form-item label="字段名">
                <el-input placeholder="字段名" v-model="scope.prop"></el-input>
              </el-form-item>
              <el-form-item label="是否自定义">
                <el-switch v-model="scope.formatter"> </el-switch>
              </el-form-item>
              <el-form-item label="固定">
                <el-switch v-model="scope.fixed"> </el-switch>
              </el-form-item>
              <el-form-item label="启用排序">
                <el-radio-group v-model="scope.sortable">
                  <el-radio :label="true">true</el-radio>
                  <el-radio :label="false">false</el-radio>
                  <el-radio label="custom">自定义</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="排序方法名"
                v-if="scope.sortable === 'custom'"
              >
                <el-input
                  placeholder="排序方法名"
                  v-model="scope.sortMethod"
                ></el-input>
              </el-form-item>
              <el-form-item label="启用筛选">
                <el-switch v-model="scope.filtersShow"> </el-switch>
              </el-form-item>
              <template v-if="scope.filtersShow">
                <el-form-item label="筛选">
                  <el-popover width="400" trigger="click" placement="left">
                    <options-component
                      :options.sync="scope.filters"
                      type="筛选"
                      @add="() => addFilters(scope)"
                      @remove="removeFilters"
                    ></options-component>
                    <el-button slot="reference">筛选数组</el-button>
                  </el-popover>
                </el-form-item>
                <el-form-item label="筛选方法名">
                  <el-input
                    placeholder="筛选方法名"
                    v-model="scope.filterMethod"
                  ></el-input>
                </el-form-item>
              </template>
              <el-form-item label="超出省略号">
                <el-switch v-model="scope.showOverflowTooltip"> </el-switch>
              </el-form-item>
              <el-form-item label="对齐方式">
                <el-radio-group v-model="scope.align">
                  <el-radio label="left">左对齐</el-radio>
                  <el-radio label="right">右对齐</el-radio>
                  <el-radio label="center">居中</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="宽度">
                <el-input-number :min="0" :step="1" v-model="scope.width"
                  >rem</el-input-number
                >
              </el-form-item>
              <el-form-item label="最小宽度">
                <el-input-number :min="0" :step="1" v-model="scope.minWidth"
                  >rem</el-input-number
                >
              </el-form-item>
            </template>
          </options-component>
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
  </form-item>
</template>
<script>
import common from '../mixin';
export default {
  name: 'TableTool',
  mixins: [common],
  data() {
    return {
      popoverIndex: 0,
      activeNames: '1',
      columnParams: {
        filtersShow: false,
        prop: 'field01',
        type: '',
        sortable: false,
        fixed: false,
        label: '你瞅啥',
        sortMethod: '',
        align: 'center',
        width: 'auto',
        minWidth: 100,
        columnKey: '',
        filters: undefined,
        className: '',
        filterMethod: '',
        showOverflowTooltip: true,
        formatter: false
      }
    };
  },
  methods: {
    addList() {
      const columnParams = JSON.parse(JSON.stringify(this.columnParams));
      columnParams.prop = 'field' + new Date().getTime();
      const len = [...Array(5).keys()];
      let label = '';
      const text =
        '说的好啊我在社区打滚这么多年所谓阅人无数就算没有见过猪走路也总明白猪肉是啥味道的一看到楼主的气势我就觉得楼主同在社区里灌水的那帮小混蛋有着本质的差别那忧郁的语调那熟悉的签名还有字里行间高屋建瓴的辞藻没用的楼主就算你怎么换马甲都是没有用的你的亿万拥戴者早已经把你认出来了你一定就是传说中的最强ID自从社区改版之后我就已经心灰意冷对社区也没抱什么希望了传说已经幻灭神话已经终结留在社区还有什么意思没想到没想到今天可以再睹楼主的风范我激动得忍不住就在屏幕前流下了眼泪是啊只要在楼主的带领下社区就有希望了我的内心再一次沸腾了我胸腔里的血再一次燃烧了楼主的几句话虽然简单却概括扼要一语道出了我们苦想多年的而不可得答案的几个重大问题的根本楼主就好比社区的明灯楼主就好比社区的方向楼主就好比社区的栋梁有楼主在社区的明天必将更好'.split(
          ''
        );
      len.map(() => {
        const a = text[Math.floor(Math.random() * (text.length - 1)) + 1];
        label += a;
      });
      columnParams.label = label;
      this.component['__options__'].tableColumn.push(columnParams);
    },
    removeList(index) {
      this.component['__options__'].tableColumn.splice(index, 1);
    },
    addFilters(scope) {
      const c = this.component['__options__'].tableColumn[this.popoverIndex];
      if (!scope.filters || (scope.filters && scope.filters.length === 0)) {
        const len = (c.filters && c.filters.length) || 0;
        scope.filters = [{ text: '哈哈' + len, value: 'Hh' + len }];
      } else {
        scope.filters.push({
          text: '哈哈' + c.filters.length,
          value: 'Hh' + c.filters.length
        });
      }
      this.component['__options__'].tableColumn.splice(
        this.popoverIndex,
        1,
        scope
      );
    },
    removeFilters(index) {
      this.component['__options__'].tableColumn[
        this.popoverIndex
      ].filters.splice(index, 1);
    }
  }
};
</script>
